<template>
    <div class="loan-out-index">
        <div class="loan-out-index-wrapper have-footer wrapper" ref='content'>
            <div class="loan-out-index-box">
                <div class="banner-box">
                    <slide
                        key='out-banner'
                        v-if='bannerList.length'
                        swiperId='banner'
                        :loop='false'
                        :autoplay='5000'>
                        <div class='banner__item' v-for='item in bannerList' @click='goLink(item.redirectUrl)'>
                            <img :src="item.url">
                        </div>
                    </slide>
                    <div class="banner__item" v-show='loading_banner && !bannerList.length'>
                        <loading :size='15' mode='full'></loading>
                    </div>
                    <div class="chat" v-if='userInfo.user' @click.stop='goChat(userInfo.user.uuid)'>
                        <img src="../images/chat@3x.png">
                        <span class="unread" v-if='unreadNum'>{{unreadNum}}</span> 
                    </div>
                </div>

                
                <!-- message -->
                <div class="message" v-if='messageList.length && messageShow' @click='goMessageDetail'>
                    <slide
                        swiperId='message'
                        direction='vertical'
                        :autoplay='2000'>
                        <div class="message__item" v-for='(item,index) in messageList' :data-index='index' :data-id='item.messageId'>
                            <span class='message__avatar'>
                                <img :src="item.user.avatar || placeholderImg" alt="">
                            </span>
                            <p class='message__text'>{{item.content}}</p>
                        </div>
                    </slide>
                    <i class="iconfont icon-close-pure" @click='messageShow = false'></i>
                </div>
                <!-- 我的借条 -->
                <div class="want-loan">
                    <div class="want-loan__button"><span class="button purple" @click="goLoanOutWant">我要发布出借</span></div>
                    <div class="loan-index-mine-list">
                        <div class="loan-index-mine"
                            @click='goLoanOutRecord'>
                            <img src="../images/menu_borrow-active2.png">
                            <div class='loan-index-mine__mid'>我的出借记录</div>
                            <div class='loan-index-mine__right' v-if='info'><span>{{info.pendingCount || 0}}</span>条未处理</div>
                            <i class="iconfont icon-arrow"></i>
                        </div>
                    </div>
                </div>

                <div class="slogen">
                    <p class="slogen__item"> <img src="../images/user_slogen3.png"> <span>51信用卡战略投资</span></p>
                    <p class="slogen__item"> <img src="../images/user_slogen2.png"> <span>资料安全</span></p>
                    <p class="slogen__item"> <img src="../images/user_slogen1.png"> <span>信息真实</span></p>
                </div>
                <div class="recommend-list-title">
                    <img class='avatar' src="../images/avatar_borrower@3x.png">
                    <p>TA们正在求借款</p>
                    <img class='history' @click='goRouter("view-record")' src="../images/view_history.png">
                </div>
                <div class="recommend-toolbar" ref='scrollDom'>
                    <span class="recommend-toobar__total">{{borrowCount}}条记录</span>
                    <picker-list 
                        v-if='borrowPages.length && !loading_switch'
                        class="recommend-toobar__select filter" 
                        picker-id='borrowPage'
                        :watch-value='true' 
                        :list='borrowPages' 
                        v-model='currentPage' 
                        @done='apiRecommend'></picker-list>
                    <span v-show='!loading_switch' class="recommend-toobar__select filter" @click='modalBorrowShow'>筛选</span>
                    <div v-show='loading_switch' class='recommend-filter-loading'><loading :size='12'></loading></div>
                </div>
                <div class="recommend-filtered" v-if='borrowFilterStr'><span>已筛选：</span><p>{{borrowFilterStr}}</p></div>
                <div class="recommend-box" v-if='borrowList.length'>
                    <div class='recommend'>
                        <div class="recommend__item" v-for='item in borrowList' @click='goRecommend(item)'>
                            <div class='recommend__borrow-info'>
                                <div class="recommend__borrow-top">
                                    <img class='recommend__avatar' :src="item.user && item.user.avatar || placeholderImg">
                                    <p class='zm'>{{item.zmScore || placeholder}}</p>
                                    <img v-if='item.isContact' width="16" height='16' src="../images/contactloan.png">
                                </div>
                                <div class="recommend__borrow-bottom">
                                    <p class='name'>{{item.user && item.user.realName || placeholder}}</p>
                                    <p class='money'>求借<span>{{item.borrowAmount | toYuanInt}}元</span></p>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <p class="page-placeholder" v-if='!borrowList.length && !loading_switch'><span>暂无求借款记录</span></p>
                <div v-show='loading_switch' class='button pure'><loading mode='full' :size='12'></loading></div>
                <p v-show='borrowList.length && !loading_switch && !lastPage' class='recommend-swtich-button button pure purple' @click='switchRecommend'>加载更多</p>
                <p v-show='borrowList.length && !loading_switch && lastPage' class='recommend-swtich-button button pure purple' @click='switchRecommend("scroll")'>点击查看下一页</p>

                <!-- <div class="placeholder" v-if='allEmpty && !loading'>
                    <img src="../images/loading_0.png" width="80" alt="">
                    <p>有借，有钱借</p>
                </div> -->

            </div>
        </div>

        <footer-bar></footer-bar>


        <modal
            class='modal-borrow'
            :show='show_modal_borrow'
            @close='show_modal_borrow=false'
            mode='bottom'>
            <div class="modal-borrow-wrapper">
                <div class="modal-borrow-box">
                    <p class="modal-borrow__title">芝麻分</p>
                    <ul class="modal-borrow__list">
                        <li class="modal-borrow__item" 
                            v-for='item in zmxyList' 
                            @click='selectItem(item)'>
                            <span :class='{active:item.select}'>{{item.display}}</span>
                        </li>
                    </ul>
                    <p class="modal-borrow__title">借款金额</p>
                    <ul class="modal-borrow__list">
                        <li class="modal-borrow__item" 
                            v-for='item in amountList'
                            @click='selectItem(item)'>
                            <span :class='{active:item.select}'>{{item.display}}</span>
                        </li>
                    </ul>
                    <!-- <p class="modal-borrow__title">设备类型</p>
                    <ul class="modal-borrow__list">
                        <li class="modal-borrow__item" 
                            v-for='item in deviceList'
                            @click='selectItem(item)'>
                            <span :class='{active:item.select}'>{{item.display}}</span>
                        </li>
                    </ul> -->
                    <p class="modal-borrow__title">年龄</p>
                    <ul class="modal-borrow__list">
                        <li class="modal-borrow__item" 
                            v-for='item in ageList'
                            @click='selectItem(item)'>
                            <span :class='{active:item.select}'>{{item.display}}</span>
                        </li>
                    </ul>
                    <p class="modal-borrow__title">性别</p>
                    <ul class="modal-borrow__list">
                        <li class="modal-borrow__item" 
                            v-for='item in sexList'
                            @click='selectItem(item)'>
                            <span :class='{active:item.select}'>{{item.display}}</span>
                        </li>
                    </ul>
                    <p class="modal-borrow__title">省份</p>
                    <ul class="modal-borrow__list">
                        <li class="modal-borrow__item" 
                            v-for='item in provinceList'
                            @click='selectItem(item)'>
                            <span :class='{active:item.select}'>{{item.display}}</span>
                        </li>
                    </ul>
                </div>
                <div class="modal-borrow__footer">
                    <span @click='selectReset'>重置</span>
                    <span @click='filterRecommend'>确定</span>
                </div>
            </div>
        </modal>

    </div>
</template>

<script>
    import { Promise } from 'es6-promise'
    import dynamics from 'dynamics.js'
    import footerBar from '../components/FooterBar.vue'
    import selectGroup from '../components/SelectGroup.vue'
    import selectOption from '../components/SelectOption.vue'
    import radioGroup from '../components/RadioGroup.vue'
    import areaSelect from '../components/AreaSelect.vue'
    import radio from '../components/Radio.vue'
    import loading from '../components/Loading.vue'
    import checkBox from '../components/CheckBox.vue'
    import toolTip from '../components/ToolTip.vue'
    import modal from '../components/Modal.vue'
    import confirm from '../components/Confirm.vue'
    import buttonLoading from '../components/ButtonLoading.vue'
    import pagination from '../components/Pagination.vue'
    import payPassword from '../components/PayPassword.vue'
    import pickerList from '../components/PickerList.vue'
    import countDown from '../components/CountDown.vue'
    import slide from '../components/Slide.vue'
    import provinceList from '../data/provinceList'
    import toYuan from '../filters/filter-toYuan'
    import dateFormat from '../filters/filter-dateFormat'
    import { timeToHours } from '../filters/filter-timeFormat'
    import { convertRequestURL } from '../utils/utils'
    import  { mapGetters, mapActions }  from 'vuex'
    import { addLenderValidation, resetAccountPasswordValidation, operatorEditValidation } from '../validation/validation'
    import { contactApi, loanInApi, loanOutApi, messageApi } from '../api/api'
    import { scrollLoading, scrollLoadingOff } from '../utils/utils'
    import moment from 'moment'

    export default {
        components:{
            footerBar,
            selectGroup,
            selectOption,
            radioGroup,
            radio,
            checkBox,
            pickerList,
            areaSelect,
            loading,
            toolTip,
            modal,
            confirm,
            slide,
            buttonLoading,
            pagination,
            payPassword,
            countDown,
        },
        filters:{
            toYuan,
            dateFormat,
            timeToHours,
            diffDay(time){
                let now = moment()
                let day = moment(time)
                let diff = day - now
            },
            toYuanInt(money){
                if(money === 0) return '0'
                else if(!money) return '0'
                else if(money >= 1000000){
                    return Number((money/1000000).toFixed(2)) + '万'
                }
                else return Number((money/100).toFixed(2))
            }

        },
        data() {
            return {
                currentPage:'',
                borrowPage:'',
                totalPage:'',
                totalCount:'',
                recommend:[],
                loading_switch:false,
                zmxy:'',
                zmxyList:[{
                    value:'0-579',
                    display:'580分以下',
                    select:false
                },{
                    value:'580-600',
                    display:'580分~600分',
                    select:false
                },{
                    value:'601-650',
                    display:'601分~650分',
                    select:false
                },{
                    value:'651-999',
                    display:'650分以上',
                    select:false
                },],
                amountList:[{
                    value:'0-99000',
                    display:'1000以下',
                    select:false
                },{
                    value:'100000-300000',
                    display:'1000～3000',
                    select:false
                },{
                    value:'300100-1000000',
                    display:'3001～10000',
                    select:false
                },{
                    value:'1000100-20000000',
                    display:'10000以上',
                    select:false
                }],
                deviceList:[{
                    value:'iPhone 6',
                    display:'iPhone 6',
                    select:false
                },{
                    value:'iPhone 6P',
                    display:'iPhone 6P',
                    select:false
                },{
                    value:'iPhone 6S',
                    display:'iPhone 6S',
                    select:false
                },{
                    value:'iPhone 6SP',
                    display:'iPhone 6SP',
                    select:false
                },{
                    value:'iPhone 7',
                    display:'iPhone 7',
                    select:false
                },{
                    value:'iPhone 7P',
                    display:'iPhone 7P',
                    select:false
                },{
                    value:'安卓',
                    display:'安卓',
                    select:false
                },{
                    value:'其他',
                    display:'其他',
                    select:false
                }],
                ageList:[{
                    value:'18-25',
                    display:'18-25岁',
                    select:false
                },{
                    value:'26-35',
                    display:'26-35岁',
                    select:false
                },{
                    value:'36-120',
                    display:'35以上',
                    select:false
                }],
                sexList:[{
                    value:'男',
                    display:'男',
                    select:false
                },{
                    value:'女',
                    display:'女',
                    select:false
                }],
                provinceList:provinceList,
                placeholderImg:require('../images/loading_1.png'),
                payPasswordShow:false,
                messageShow:true,
                messageList:[],
                messageIndex:0,
                bannerList:[],
                main:{},
                payStatus:'',
                password:'',
                show_modal_borrow:false,
                placeholder:'--',
                userCount:'',
                info:{},
                records:[],
                num:1,
                loading:true,
                loading_banner:true,
                loading_count:false,
            }
        },
        computed:{
            ...mapGetters([
                'msgTip',
                'localInfo'
            ]),
            scrollOut(){
                return this.localInfo.scrollOut
            },
            unreadNum(){
                return this.localInfo.unreadNum
            },
            borrowList(){
                return this.localInfo.borrowList
            },
            borrowFilterStr(){
                return this.localInfo.borrowFilterStr
            },
            borrowFilterObj(){
                return this.localInfo.borrowFilterObj
            },
            borrowPageInfo(){
                return this.localInfo.borrowPageInfo
            },
            borrowCount(){
                if(this.localInfo.borrowPageInfo.outPageInfo)
                return this.localInfo.borrowPageInfo.outPageInfo.totalCount
            },
            borrowPages(){
                if(this.localInfo.borrowPageInfo.outPageInfo){
                    let total = this.localInfo.borrowPageInfo.outPageInfo.totalPage
                    let arr = [] 
                    _.times(total,(n)=>{
                        arr.push({
                            value:n+1,
                            display:`第${n+1}页`
                        })
                    })
                    return arr
                }
                return []
            },
            lastPage(){
                if(this.localInfo.borrowPageInfo.inPageInfo){
                    return this.localInfo.borrowPageInfo.inPageInfo.totalPage == this.localInfo.borrowPageInfo.inPageInfo.pageNum
                }
            },
            userInfo(){
                return this.localInfo.userInfo
            },
            needLogin(){
                return this.localInfo.needLogin
            },
            zmxyListStr(){
                let str = ''
                _.each(this.zmxyList,(value,index)=>{
                    if(value.select == true){
                        if(!str){
                            str = `${value.value}`
                        }
                        else{
                            str = `${str},${value.value}`
                        }
                    }
                })
                return str
            },
            zmxyDisplayStr(){
                let str = ''
                _.each(this.zmxyList,(value,index)=>{
                    if(value.select == true){
                        if(!str){
                            str = `${value.display}`
                        }
                        else{
                            str = `${str},${value.display}`
                        }
                    }
                })
                return str
            },
            amountListStr(){
                let str = ''
                _.each(this.amountList,(value,index)=>{
                    if(value.select == true){
                        if(!str){
                            str = `${value.value}`
                        }
                        else{
                            str = `${str},${value.value}`
                        }
                    }
                })
                return str
            },
            amountDisplayStr(){
                let str = ''
                _.each(this.amountList,(value,index)=>{
                    if(value.select == true){
                        if(!str){
                            str = `${value.display}`
                        }
                        else{
                            str = `${str},${value.display}`
                        }
                    }
                })
                return str
            },
            deviceListStr(){
                let str = ''
                _.each(this.deviceList,(value,index)=>{
                    if(value.select == true){
                        if(!str){
                            str = `${value.value}`
                        }
                        else{
                            str = `${str},${value.value}`
                        }
                    }
                })
                return str
            },
            ageListStr(){
                let str = ''
                _.each(this.ageList,(value,index)=>{
                    if(value.select == true){
                        if(!str){
                            str = `${value.value}`
                        }
                        else{
                            str = `${str},${value.value}`
                        }
                    }
                })
                return str
            },
            ageListDisplayStr(){
                let str = ''
                _.each(this.ageList,(value,index)=>{
                    if(value.select == true){
                        if(!str){
                            str = `${value.display}`
                        }
                        else{
                            str = `${str},${value.display}`
                        }
                    }
                })
                return str
            },
            sexListStr(){
                let str = ''
                _.each(this.sexList,(value,index)=>{
                    if(value.select == true){
                        if(!str){
                            str = `${value.value}`
                        }
                        else{
                            str = `${str},${value.value}`
                        }
                    }
                })
                return str
            },
            sexListDisplayStr(){
                let str = ''
                _.each(this.sexList,(value,index)=>{
                    if(value.select == true){
                        if(!str){
                            str = `${value.display}`
                        }
                        else{
                            str = `${str},${value.display}`
                        }
                    }
                })
                return str
            },
            provinceListStr(){
                let str = ''
                _.each(this.provinceList,(value,index)=>{
                    if(value.select == true){
                        if(!str){
                            str = `${value.value}`
                        }
                        else{
                            str = `${str},${value.value}`
                        }
                    }
                })
                return str
            },
            filteredStr(){
                let str = ''
                if(this.zmxyListStr){
                    str =  `芝麻分${this.zmxyDisplayStr} / `
                }
                if(this.amountDisplayStr){
                    str =  `${str}${this.amountDisplayStr} / `
                }
                if(this.deviceListStr){
                    str =  `${str}${this.deviceListStr} / `
                }
                if(this.ageListStr){
                    str =  `${str}${this.ageListDisplayStr} / `
                }
                if(this.sexListStr){
                    str =  `${str}${this.sexListStr} / `
                }
                if(this.provinceListStr){
                    str =  `${str}${this.provinceListStr}`
                }
                
                return str
            }
        },
        methods:{
            // actions
            ...mapActions([
                'showLoading',
                'hideLoading',
                'setMsgTip',
                'borrowListSquare',
                'setBorrowFilterStr',
                'setBorrowFilterObj',
                'setScrollOut'
            ]),

            // filters
            timestampToDate(timestamp){
                if(!timestamp) return this.placeholder
                return moment(timestamp).format('YYYY-MM-DD')
            },

            // function

            
            daysTransform(from,to,type){
                let suffix
                let fromStr = from
                let toStr = to

                if(type == 'day'){
                    fromStr = fromStr+ '天'
                    toStr = toStr+ '天'
                }
                else{
                    fromStr = fromStr + '期'
                    toStr = toStr + '期'
                }

                if(from >= 30 && type == 'day'){
                    suffix = '个月'
                    fromStr = from / 30 + '个月'

                }
                if(to >= 30 && type == 'day'){
                    suffix = '个月'
                    toStr = to / 30 + '个月'

                }
                if(from == to){
                    return fromStr
                }
                else{
                    return fromStr  + '~' + toStr 
                }
            },
            modalBorrowShow(){
                this.show_modal_borrow = true

                this.$ga.event({
                  eventCategory: 'Filter_v',
                  eventAction: 'click',
                  eventLabel: '筛选按钮点击量'
                })
            },
            filterRecommend(){
                this.show_modal_borrow = false
                this.setBorrowFilterStr(this.filteredStr)
                this.setBorrowFilterObj({
                    zmxy:this.zmxyListStr,
                    amount:this.amountListStr,
                    age:this.ageListStr,
                    sex:this.sexListStr,
                    province:this.provinceListStr,
                    device:this.deviceListStr
                })
                this.apiRecommend(1)
            },
            caclPersent(pass,reject){
                if(pass == 0) return 0
                return (pass/(pass+reject)*100).toFixed(2)
            },
            goDetailMe(item){
                let number = item.lendNo
                let isMyPublishLend = item.isMyPublishLend
                let isMyPublishLendStr

                if(item.isMyPublishLend === false){
                    isMyPublishLendStr = 'false'
                }
                else{
                    isMyPublishLendStr = 'true'
                }

                this.$router.push({
                    name:'loan-out-detail-me',
                    params:{
                        number:number
                    },
                    query:{
                        isMyPublishLend:isMyPublishLendStr
                    }
                })
            },
            goMessageDetail(event){
                let el = $(event.target).closest('.swiper-slide')
                if(!el.length) return

                let id = el.data('id')
            
                this.$router.push({
                    name:'message-box-detail',
                    params:{
                        id:id
                    }
                })
            },
            goRouter(name){
                if(!this.checkLogin()) return

                this.$router.push({
                    name:name
                })
            },
            goLoanOutWant(){
                if(!this.checkLogin()) return
                
                this.$router.push({
                    name:'loan-out-want-index'
                })
            },
            goLoanOutRecord(){
                if(!this.checkLogin()) return

                this.$router.push({
                    name:'loan-out-record'
                })
            },
            selectItem(item){
                item.select = !item.select
            },
            selectReset(){
                _.each(this.zmxyList,(value,index)=>{
                    value.select = false
                })
                _.each(this.amountList,(value,index)=>{
                    value.select = false
                })
                _.each(this.deviceList,(value,index)=>{
                    value.select = false
                })
                _.each(this.ageList,(value,index)=>{
                    value.select = false
                })
                _.each(this.sexList,(value,index)=>{
                    value.select = false
                })
                _.each(this.provinceList,(value,index)=>{
                    value.select = false
                })
            },
            checkLogin(){
                if(this.needLogin){
                    this.$router.push({
                        name:'bind-phone'
                    })
                    return false
                }
                if(this.userInfo.user){
                    if(!this.userInfo.user.bizRole){
                        this.$router.push({
                            name:'id-select'
                        })
                        return false
                    }
                }
                return true
            },
            getMain(num){
                // this.showLoading()
                loanOutApi.main()
                .then(result=>{
                    // this.hideLoading()
                    this.main = result
                })
                .catch(error => {
                    console.error(error)
                    // this.hideLoading()
                })
            },
            goLink(url){
                if(!this.checkLogin()) return
                if(!url) return
                location.href = url
            },
            goChat(id){
                if(!this.userInfo.isPay || this.userInfo.isExpired){
                    this.setMsgTip({
                        text:'请先完成信用报告',
                        type:'info'

                    })
                    this.$router.push({
                        name:'user-credit-report-index'
                    })
                    return
                }
                if(this.userInfo.user){
                    if(!this.userInfo.user.bizRole){
                        this.$router.push({
                            name:'id-select'
                        })
                        return false
                    }
                }
                
                this.showLoading()
                contactApi.im({
                    uuid:id
                })
                .then(result=>{
                    this.hideLoading()
                    let info = result.info
                    let myAccid = info.myAccid
                    let accid = info.accid
                    let token = info.token
                    location.href = convertRequestURL(`?token=${token}&uid=${myAccid}#/session`,'chat')
                })
                .catch(error => {
                    console.error(error)
                    this.hideLoading()
                })
            },
            getInfo(){
                this.loading = true
                loanOutApi.myPublishLending()
                .then(result=>{
                    this.loading = false
                    this.info = result
                })
                .catch(error => {
                    console.error(error)
                    this.loading = false
                })
            },
            getMessage(){
                messageApi.unReadList()
                .then(result=>{
                    this.messageList = result
                })
                .catch(error => {
                    console.error(error)
                })
            },
            goRecommend(item){
                if(!this.checkLogin()) return
                
                this.$ga.event({
                  eventCategory: 'link',
                  eventAction: 'click',
                  eventLabel: 'borrowRecommend - ' + this.channel + '-' + item.user.realName
                })

                loanOutApi.addBrowseRecord({
                    borrowNo:item.borrowNo,
                    borrowAmount:item.borrowAmount,
                    zmScore:item.zmScore
                })
                .then(result=>{

                })
                .catch(error => {
                    console.error(error)
                })

                let user = item.user
                let borrow = item.borrow
                this.$router.push({
                    name:'contact-detail',
                    params:{
                        id:user.uuid,
                    }
                })
            },
            apiRecommend(num){
                let page 
                page = num ? num : this.currentPage
                this.loading_switch = true
                this.borrowListSquare({
                    refresh:true,
                    filterStr:{
                        zmScoreString:this.zmxyListStr,
                        amountString:this.amountListStr,
                        ageString:this.ageListStr,
                        province:this.provinceListStr,
                        gender:this.sexListStr,
                        loginDevice:this.deviceListStr,
                    },
                    pageNum:page
                })
                .then(result=>{
                    this.setCurrentPage()
                    this.loading_switch = false
                })
                .catch(error => {
                    console.error(error)
                    this.loading_switch = false
                })
            },
            getRecommend(num){
                if(!this.borrowList.length){
                    this.loading_switch = true
                    this.borrowListSquare({
                        refresh:true,
                        filterStr:{
                            zmScoreString:this.zmxyListStr,
                            amountString:this.amountListStr,
                            ageString:this.ageListStr,
                            province:this.provinceListStr,
                            gender:this.sexListStr,
                            loginDevice:this.deviceListStr,
                        }
                    })
                    .then(result=>{
                        console.log(this.loading_switch)
                        this.loading_switch = false
                        this.setCurrentPage()
                    })
                    .catch(error => {
                        console.error(error)
                        this.loading_switch = false
                    })
                }
                else{
                    this.setCurrentPage()
                }
            },
            setCurrentPage(){
                if(this.localInfo.borrowPageInfo.outPageInfo){
                    this.currentPage =  this.localInfo.borrowPageInfo.outPageInfo.pageNum
                }
            },
            setSelect(){
                let zmxyArr = (this.borrowFilterObj.zmxy && this.borrowFilterObj.zmxy.split(',')) || []
                let ageArr = (this.borrowFilterObj.age && this.borrowFilterObj.age.split(',')) || []
                let amountArr = (this.borrowFilterObj.amount && this.borrowFilterObj.amount.split(',')) || []
                let provinceArr = (this.borrowFilterObj.province && this.borrowFilterObj.province.split(',')) || []
                let sexArr = (this.borrowFilterObj.sex && this.borrowFilterObj.sex.split(',')) || []
                let deviceArr = (this.borrowFilterObj.device && this.borrowFilterObj.device.split(',')) || []
                _.each(this.zmxyList,(value,index)=>{
                    _.each(zmxyArr,(val,i)=>{
                        if(val == value.value){
                            value.select = true
                        }
                    })
                })
                _.each(this.ageList,(value,index)=>{
                    _.each(ageArr,(val,i)=>{
                        if(val == value.value){
                            value.select = true
                        }
                    })
                })
                _.each(this.amountList,(value,index)=>{
                    _.each(amountArr,(val,i)=>{
                        if(val == value.value){
                            value.select = true
                        }
                    })
                })
                _.each(this.provinceList,(value,index)=>{
                    _.each(provinceArr,(val,i)=>{
                        if(val == value.value){
                            value.select = true
                        }
                    })
                })
                _.each(this.sexList,(value,index)=>{
                    _.each(sexArr,(val,i)=>{
                        if(val == value.value){
                            value.select = true
                        }
                    })
                })
                _.each(this.deviceList,(value,index)=>{
                    _.each(deviceArr,(val,i)=>{
                        if(val == value.value){
                            value.select = true
                        }
                    })
                })
            },
            getBanner(){
                loanInApi.banner({
                    bizRole:'B'
                })
                .then(result=>{
                    this.loading_banner = false
                    this.bannerList = result
                })
                .catch(error => {
                    this.loading_banner = false
                    console.error(error)
                })
            },
            switchRecommend(type,refresh){
                if(this.loading_switch == true) return
                this.loading_switch = true
                let scrollTop = $(this.$refs.content).scrollTop()
                let top = scrollTop + $(this.$refs.scrollDom).offset().top

                this.borrowListSquare({
                    refresh:refresh,
                    filterStr:{
                        zmScoreString:this.zmxyListStr,
                        amountString:this.amountListStr,
                        ageString:this.ageListStr,
                        province:this.provinceListStr,
                        gender:this.genderListStr,
                        loginDevice:this.deviceListStr,
                    }
                })
                .then(result=>{
                    this.setCurrentPage()
                    if(type == 'scroll'){
                        let o = {
                          scroll: scrollTop
                        }

                        // $('body').css('visibility','hidden')

                        dynamics.animate(o, {
                          scroll: top,
                        }, {
                          change: ()=> {
                            $(this.$refs.content).scrollTop(o.scroll);
                          },
                          complete:()=>{
                            setTimeout(()=>{
                                this.loading_switch = false
                            },200)
                          },
                          type: dynamics.easeInOut,
                          duration: 500,
                          friction: 50
                        })
                    }
                    else{
                        this.loading_switch = false
                    }
                })
                .catch(error => {
                    console.error(error)
                    this.loading_switch = false
                })
            }
        },
        created(){
            this.getMain()
            this.getInfo()
            this.getBanner()
            this.getMessage()
            this.getRecommend(1)
            this.setSelect()
            this.$nextTick(()=>{
                $(this.$refs.content).scrollTop(this.scrollOut);
                scrollLoading('.loan-out-index-wrapper','.loan-out-index-box',()=>{
                    console.log('scroll')
                    if(this.loading_switch) return
                    if(this.lastPage) return
                    if(!this.borrowList.length) return
                    this.switchRecommend()
                },20)
            })
        },
        destroyed(){
            scrollLoadingOff('.loan-out-index-box')
            let scrollTop = $('.loan-out-index-wrapper').scrollTop()
            this.setScrollOut(scrollTop)
        }
    }
</script>

<style lang="scss">
    @import "../sass/variables";
    @import "../sass/extends";
    @import "../sass/mixins";
    .loan-out-index{
        .loan-out-index-wrapper{
            z-index:1;
        }
        .loan-out-index-box{
            transition:height ease .3s;
        }
        .recommend__borrow-info{
            flex:1;
            padding: 0 16px;
        }
        .recommend__borrow-top{
            @extend %font-caption;
            display: flex;
            align-items: center;
            .name{
                @extend %font-caption;
                color:$importColor;
            }
            .zm{
                display: block;
                width: 49px;
                height: 21px;
                line-height: 21px;
                background: url(../images/bg_zhimafen@3x.png) no-repeat left center;
                background-size: 49px 21px;
                margin-left:9px;
                text-align:left;
                padding-left:18px;
                color:$green;
            }
        }
        .recommend__borrow-bottom{
            display: flex;
            justify-content: space-between;
            align-items: center;;
            text-align:left;
            @extend %font-caption;
            color:$defaultColor;
            .name{
                color:$importColor;
            }
            .money span{
                @extend %font-body2;
                color:$importColor;
            }
        }
        .loan-out-card{
            margin-top: 16px;
        }
        .want-loan__text{
            @extend %font-caption;
            padding-top: 6px;
            text-align: center;
        }
        .want-loan__record{
            padding-top: 12px;
            .button{
                color:$purple;
            }
        }
        .component-picker-list{
            width: auto;
            position: relative;
            overflow:hidden;
            &:before{
                @include triangle(10px,$defaultColor,bottom)
                content:'';
                position: absolute;
                top:50%;
                margin-top:-2.5px;
                right:0;
            }
        }
        .modal-borrow-wrapper{
            position: relative;
            height: 360px;
        }
        .recommend-filtered{
            display: flex;
            @extend %font-caption;
            padding:6px 15px;
            span{
                font-weight: normal;
                display: block;
                color:$importColor;
            }
            p{
                flex:1;
            }
        }
        .modal-borrow__footer{
            background-color: #fff;
            border-top: 1px solid rgba(#000,.1);
            position: absolute;
            bottom:0;
            left: 0;
            right: 0;
            display: flex;
            justify-content: flex-end;
            padding: 8px;
            span{
                @extend %font-button;
                color:$importColor;
                text-align: center;
                display: block;
                width: 64px;
                line-height: 48px;
                &:active{
                    color:darken($importColor,30%);
                }
                &:last-child{
                    color:$orange;
                    &:active{
                        color:darken($orange,30%);
                    }
                }
            }

        }
        .modal-borrow-box{
            position: absolute;
            overflow:auto;
            width: 100%;
            height: 100%;
            top:0;
            left:0;
            padding-bottom: 70px;
            padding-left: 16px;
            padding-right: 16px;
            box-sizing:border-box;
        }
        .modal-borrow{
            z-index:$zIndex_top;
            .component-modal__main{
                padding: 0;
            }
        }
        .modal-borrow__title{
            @extend %font-body2;
            padding:16px 4px 8px 4px;
            color:$importColor;
        }
        .modal-borrow__list{
            overflow:hidden;
        }
        .modal-borrow__item{
            width:(100%/3);
            float:left;
            @extend %font-body1;
            text-align: center;
            padding:4px;
            box-sizing:border-box;
            border-radius:2px;
            span{
                display: block;
                background-color: $backgroundColor;
                padding: 6.5px 0;
                &.active,&:active{
                    color:$orange;
                    background-color: #FFCCBC;
                }
            }
        }

    }

</style>
